<template>
  <div class="left-center">
    <div class="inner-top">
      <div ref="echartsContainer" style="width: 460px; height: 300px;"></div>
      <div class="inner-title">
        培训基地考生占比
      </div>
    </div>
    <div class="inner-top">
      <div ref="echartsContainer2" style="width: 460px; height: 300px;"></div>
      <div class="inner-title">
        A类培训基地通过率排名
      </div>
    </div>
    <div class="inner-top">
      <div ref="echartsContainer3" style="width: 460px; height: 300px;"></div>
      <div class="inner-title">
        B类培训基地及格率排名
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { queryTrainingBase, queryTrainingBasePassPercent, queryTrainingBasePassPercentB } from '@/api/driver.js'
export default {
  data () {
    return {
      config: {
        value: 80,
        localGradient: true
      }
    }
  },
  mounted () {
    this.getQueryTrainingBase()
    this.getQueryTrainingBasePassPercent()
    this.getQueryTrainingBasePassPercentB()
  },
  methods: {
    getQueryTrainingBase () {
      queryTrainingBase().then(res => {
        let aaa = res.data.data.sort((a, b) => Number(a.trainingBaseCountPercent) - Number(b.trainingBaseCountPercent))
        let lableData = []
        let valueData = []
        aaa.map(q => {
          lableData.push(q.trainingBase)
          valueData.push(Number(q.trainingBaseCountPercent))
        })
        var myChart = echarts.init(this.$refs.echartsContainer)
        myChart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            show: false
          },
          grid: {
            left: '3%',
            right: '4%',
            top: '20%',
            bottom: '5%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: '#01AAFF',
                fontSize: 14
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#01AAFF'
              }
            },
            axisTick: {
              show: true,
              length: 4,
              lineStyle: {
                color: '#01AAFF'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#01AAFF40', '#01AAFF60']
              }
            }
          },
          yAxis: {
            type: 'category',
            data: lableData,
            axisTick: {
              show: true,
              length: 4,
              lineStyle: {
                color: '#01AAFF'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#01AAFF'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#01AAFF',
                fontSize: 14
              }
            }
          },
          series: [
            {
              name: '通过率',
              type: 'bar',
              orientation: 'horizontal',
              data: valueData,
              barWidth: 20,
              // 设置渐变色
              itemStyle: {
                borderRadius: [0, 5, 5, 0],
                color: new echarts.graphic.LinearGradient(
                  0, 1, 1, 0,
                  [
                    { offset: 0, color: '#00EAFF60' },
                    { offset: 0.5, color: '#01AAFF80' },
                    { offset: 1, color: '#01AAFF' }
                  ]
                )
              }
            }
          ]
        })
      })
    },
    getQueryTrainingBasePassPercent () {
      queryTrainingBasePassPercent().then(res => {
        let aaa = res.data.data.sort((a, b) => Number(a.trainingBasePassPercent) - Number(b.trainingBasePassPercent))
        let lableData = []
        let valueData = []
        aaa.map(q => {
          lableData.push(q.trainingBase)
          valueData.push(Number(q.trainingBasePassPercent))
        })
        var myChart2 = echarts.init(this.$refs.echartsContainer2)
        myChart2.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            show: false
          },
          grid: {
            left: '3%',
            right: '4%',
            top: '20%',
            bottom: '5%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: '#01AAFF',
                fontSize: 14
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#01AAFF'
              }
            },
            axisTick: {
              show: true,
              length: 4,
              lineStyle: {
                color: '#01AAFF'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#01AAFF40', '#01AAFF60']
              }
            }
          },
          yAxis: {
            type: 'category',
            data: lableData,
            axisTick: {
              show: true,
              length: 4,
              lineStyle: {
                color: '#01AAFF'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#01AAFF'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#01AAFF',
                fontSize: 14
              }
            }
          },
          series: [
            {
              name: '通过率',
              type: 'bar',
              orientation: 'horizontal',
              data: valueData,
              barWidth: 20,
              // 设置渐变色
              itemStyle: {
                borderRadius: [0, 5, 5, 0],
                color: new echarts.graphic.LinearGradient(
                  0, 1, 1, 0,
                  [
                    { offset: 0, color: '#00EAFF60' },
                    { offset: 0.5, color: '#01AAFF80' },
                    { offset: 1, color: '#01AAFF' }
                  ]
                )
              }
            }
          ]
        })
      })
    },
    getQueryTrainingBasePassPercentB () {
      queryTrainingBasePassPercentB().then(res => {
        let aaa = res.data.data.sort((a, b) => Number(a.trainingBasePassPercent) - Number(b.trainingBasePassPercent))
        let lableData = []
        let valueData = []
        aaa.map(q => {
          lableData.push(q.trainingBase)
          valueData.push(Number(q.trainingBasePassPercent))
        })
        var myChart3 = echarts.init(this.$refs.echartsContainer3)
        myChart3.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            show: false
          },
          grid: {
            left: '3%',
            right: '4%',
            top: '20%',
            bottom: '5%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: '#01AAFF',
                fontSize: 14
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#01AAFF'
              }
            },
            axisTick: {
              show: true,
              length: 4,
              lineStyle: {
                color: '#01AAFF'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#01AAFF40', '#01AAFF60']
              }
            }
          },
          yAxis: {
            type: 'category',
            data: lableData,
            axisTick: {
              show: true,
              length: 4,
              lineStyle: {
                color: '#01AAFF'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#01AAFF'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#01AAFF',
                fontSize: 14
              }
            }
          },
          series: [
            {
              name: '通过率',
              type: 'bar',
              orientation: 'horizontal',
              data: valueData,
              barWidth: 20,
              // 设置渐变色
              itemStyle: {
                borderRadius: [0, 5, 5, 0],
                color: new echarts.graphic.LinearGradient(
                  0, 1, 1, 0,
                  [
                    { offset: 0, color: '#00EAFF60' },
                    { offset: 0.5, color: '#01AAFF80' },
                    { offset: 1, color: '#01AAFF' }
                  ]
                )
              }
            }
          ]
        })
      })
    }
  }
}
</script>

<style lang='scss' scoped>
  .left-center{
    height: 750px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    color: rgba(84,197,239,1);
    .inner-top{
      height: 33%;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .inner-title{
        font-size: 22px;
      }
    }
    
    .inner-middle{
      height: 33%;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .inner-title{
        font-size: 22px;
      }
    }
  }
</style>